<template>
    <div class="global-market">
        <template>
            <v-container fluid>
                <v-data-iterator
                        :items="items"
                        :items-per-page.sync="items.length"
                        hide-default-footer
                        no-data-text="您还未发布任何物品在全球市场中~"
                >
                    <template v-slot:header>
                        <v-toolbar
                                class="mb-2"
                                color="indigo darken-5"
                                dark
                                flat
                        >
                            <v-toolbar-title>展示您所有全球市场物品</v-toolbar-title>
                        </v-toolbar>
                    </template>

                    <template v-slot:default="props">
                        <v-row>
                            <v-col
                                    v-for="item in props.items"
                                    :key="item.id"
                                    cols="12"
                                    sm="6"
                                    md="4"
                                    lg="3"
                            >
                                <v-card>
                                    <v-card-title class="subheading font-weight-bold">
                                        {{ item.itemName || '未命名物品' }} {{new Date().getTime() > item.endTime ? ' - 已下架' : ''}}
                                    </v-card-title>

                                    <v-divider></v-divider>

                                    <v-list dense>
                                        <v-list-item>
                                            <v-list-item-content>ID:</v-list-item-content>
                                            <v-list-item-content class="align-end">
                                                {{ item.id }}
                                            </v-list-item-content>
                                        </v-list-item>
                                        <v-list-item>
                                            <v-list-item-content>售价:</v-list-item-content>
                                            <v-list-item-content class="align-end">
                                                {{ item.price }} 金币
                                            </v-list-item-content>
                                        </v-list-item>

                                        <v-list-item>
                                            <v-list-item-content>发布时间:</v-list-item-content>
                                            <v-list-item-content class="align-end">
                                                {{ new Date(item.startTime).toLocaleDateString() }}
                                            </v-list-item-content>
                                        </v-list-item>

                                        <v-list-item>
                                            <v-list-item-content>下架时间:</v-list-item-content>
                                            <v-list-item-content class="align-end">
                                                {{ new Date(item.endTime).toLocaleDateString() }}
                                            </v-list-item-content>
                                        </v-list-item>
                                    </v-list>
                                </v-card>
                            </v-col>
                        </v-row>
                    </template>

                    <template v-slot:footer>
                        <v-toolbar
                                class="mt-2"
                                color="indigo"
                                dark
                                flat
                        >
                            <v-toolbar-title class="subheading">
                                您共有 {{items.length}} 个物品在全球市场
                            </v-toolbar-title>
                        </v-toolbar>
                    </template>
                </v-data-iterator>
            </v-container>
        </template>
    </div>
</template>

<script>

    import common from "../../common";
    import ajax from "../../Ajax";

    export default {
        name: "GlobalMarket",
        data: () => ({
            itemsPerPage: 4,
            items: [],
        }),
        mounted() {
            this.getMyGlobalMarketRecord()
        },
        methods: {
            getMyGlobalMarketRecord() {
                let playerName = common.getCookie('playerName')
                if (!!!playerName) {
                    console.log('玩家名获取失败')
                    return
                }
                let param = new URLSearchParams()
                param.append("playerName", playerName)
                ajax.post('/globalMarket/getPlayerGlobalMarketRecord', param).then(res => {
                    if (res.data.code === 200) {
                        this.$Message.success(res.data.msg)
                        this.items = res.data.list
                    } else {
                        this.$Message.warning(res.data.msg)
                    }
                })
            }
        }
    }
</script>

<style scoped>

</style>
